<template>
  <div>
    <Hader title="在线支付" />
    <div class="time">
      <div class="remaining">
        <div>支付剩余时间</div>
        <div class="over-time">{{countDown}}</div>
      </div>
      <div class="shopMarket">
        <span>汉堡王（珠江摩尔庄园店）</span>
        <span>¥93.5</span>
      </div>
    </div>
    <div class="online-pay">在线支付</div>
    <div class="wei-pay">
      <div class="iconfont icon-zhifu-weixinzhifu"></div>
      <div class="title">微信</div>
      <div class="iconfont icon-zhengque"></div>
    </div>
    <div v-if="!timerOut" class="pay-Sure" @click="pay()">
      确认支付
    </div>
    <div v-else class="pay-Sure time-out">
      订单超时
    </div>
    <div class="pay-Sure free" @click="free">
      吃霸王餐
    </div>
  </div>
</template>
<script>
import Hader from '../../components/Myheder.vue'
export default {
  name: 'pay',
  data () {
    return {
      countDown: "00:15:00",
      timer: null,
      timerOut: false,
      address: this.$store.state.addAddress,
      addRemake: this.$store.state.addRemake,
      orderInfo: this.$store.state.orderInfo,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.countTimeDown()
    })
  },
  created () {
  },
  computed: {
  },
  methods: {
    countTimeDown () {
      let minute = 14
      let secound = 60
      this.timer = setInterval(() => {
        secound--

        if (secound == "00" && minute == "00") {
          this.countDown = "订单已超时"
          clearInterval(this.timer)
          this.timerOut = true
          return
        }

        if (secound == "00") {
          secound = 59
          minute--

          if (minute < 10) {
            minute = "0" + minute
          }

        }
        if (secound < 10) {
          secound = "0" + secound
        }

        this.countDown = "00:" + minute + ":" + secound
      }, 1000);
    },
    pay () {
      const data = {
        body: "饿了吧",
        out_trade_no: new Date().getTime().toString(),
        total_fee: 1000
      };
      alert("进入到pay方法中");
      // 请求 http://www.thenewstep.cn/wxzf/example/jsapi.php
      fetch("https://www.thenewstep.cn/wxzf/example/jsapi.php", {
        method: "POST",
        headers: {
          "Content-type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(res => res.json())
        .then(data => {
          this.onBridgeReady(data);
        })
        .catch(err => {
          alert('请求失败');
          // this.addOrder();
        });
    },
    onBridgeReady (data) {
      WeixinJSBridge.invoke('getBrandWCPayRequest', data,
        (res) => {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            this.generateOrders()
            alert('支付成功')
          }
        });
    },
    /* 生成订单 */
    generateOrders () {
      const userId = localStorage.getItem('userId')
      let orderlist = {
        orderInfo: this.$store.state.orderInfo,
        userInfo: this.$store.state.addAddress,
        totalPrice: this.$store.state.remakeInfo.price,
        remakeInfo: this.$store.state.remakeInfo,
        image_path: this.$store.state.orderInfo.shopInfo.image_path,
        shopInfoName: this.$store.state.orderInfo.shopInfo.name,
        selectFoodsName: this.orderInfo.selectFoods[0].name
      };
      console.log(orderlist,userId);
      // alert(JSON.stringify(orderlist));
      this.$axios.post(`/api/user/add_order/${userId}`, orderlist).then(res => {
        console.log(res);
        this.$router.push("/order");
      });
    },
    free(){
      this.generateOrders ()
    }
  },
  components: {
    Hader,
  }
}
</script>
<style  scoped>
.time {
  height: 4.8rem;
  background-color: #fff;
  overflow: hidden;
}
.remaining {
  text-align: center;
  margin-top: 1.2rem;
}
.remaining div:nth-child(1) {
  font-size: 0.1rem;
}
.over-time {
  font-size: 0.8rem;
  margin-top: 0.3rem;
}
.shopMarket {
  display: flex;
  justify-content: space-between;
  border-top: 0.03rem rgb(224, 223, 223) solid;
  margin: 0.5rem 0.5rem;
  padding: 0.5rem 0rem;
}
.shopMarket span:nth-child(2) {
  color: rgb(241, 154, 22);
}
.online-pay {
  height: 1rem;
  line-height: 1rem;
  padding: 0.2rem 0.5rem;
}
.wei-pay {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  height: 1.8rem;
  line-height: 1.8rem;
  background-color: #fff;
}
.icon-zhifu-weixinzhifu {
  color: #0fac07;
  font-size: 0.7rem;
  flex: 1;
}
.icon-zhengque {
  color: #4dd95f;
  font-size: 0.4rem;
  flex: 1;
}
.title {
  flex: 8;
  margin-left: 0.2rem;
  font-size: 0.45rem;
  font-weight: 550;
}
.pay-Sure {
  height: 1rem;
  background-color: #45d15d;
  margin: 0.5rem;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 1rem;
  color: #fff;
}
.time-out {
  background-color: rgb(172, 168, 168);
  color: rgb(31, 30, 30);
}
.free{
  background-color: rgb(231, 97, 7);
}
</style>
